<template>
    <el-dialog title="关联市场活动" width="80%" :before-close="handleClose">
        <!-- 搜索框 -->
        <div style="margin-bottom: 10px; display: flex; align-items: center;">
            <el-input v-model="queryForm.query.name" placeholder="请输入市场活动名称，支持模糊查询"
                style="width: 300px; margin-right: 10px;" clearable />
            <el-button type="primary" @click="handleSearch">搜索</el-button>
        </div>

        <!-- 表格 -->
        <div>
            <el-table :data="activities" border style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column prop="name" label="名称"></el-table-column>
                <el-table-column prop="startDate" label="开始日期"></el-table-column>
                <el-table-column prop="endDate" label="结束日期"></el-table-column>
                <el-table-column prop="owner" label="所有者"></el-table-column>
            </el-table>

        </div>
        <el-pagination v-model:currentPage="queryForm.pageNum" v-model:page-size="queryForm.pageSize"
            :page-sizes="[2, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        <!-- 操作按钮 -->
        <div style="margin-top: 20px; text-align: right;">
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" @click="confirmSelection">关联</el-button>
        </div>
    </el-dialog>
</template>
<script setup>
import { defineEmits, defineProps, ref, watch, inject  } from "vue" //引入Vue 3 Composition API
import requestUtil from "@/util/request";
import { ElMessage } from 'element-plus';
import { debounce } from "lodash";

// 防抖
const resizeObserver  = (window).ResizeObserver;
(window).ResizeObserver = class ResizeObserver extends resizeObserver  {
  constructor(callback) {
    callback = debounce(callback, 100);
    super(callback);
  }
};

//父组件传递的数据
const props = defineProps(
    {
        clueId: {
            type: String,
            default: '',
            require: true
        },
        dialogVisible: {
            type: Boolean,
            default: false,
            required: true
        }

    }
)
//条件
const queryForm = ref({
    query: {
        'name': '',
        'owner': '',
        'startTime': '',
        'endTime': '',
        'clueId': ''
    },
    pageNum: 1,
    pageSize: 2
})
const initActivityList = inject('initActivityList')
// 用户选中的活动
const selectedActivities = ref([]);
// 全部市场活动数据
const activities = ref([]);
const total = ref(0)
//父组件传递的方法
const emits = defineEmits(['update:modelValue'])
//关闭from表单
const handleClose = async () => {
    emits('update:modelValue', false)
}

// 搜索处理函数
const handleSearch = async () => {
    queryForm.value.query.clueId = props.clueId
    const res = await requestUtil.post("/crmActivity/list", queryForm.value);
    activities.value = res.data.data.tlist;
    total.value = res.data.data.total;
};

watch(
    () => props.dialogVisible,
    () => {
        if (Boolean(props.dialogVisible)) {
            handleSearch()
        }
    }
)

// 更新选中活动
const handleSelectionChange = (selection) => {
    selectedActivities.value = selection;
};

// 确认关联操作
const confirmSelection = async () => {
    var ids = []
    selectedActivities.value.forEach(row => {
        ids.push(row.id)
    })

    const res = await requestUtil.post('crmClueActivityRelation/addClueActivityRelation', { 'clueId': props.clueId, 'activityIds': ids })
    if (res.data.code == 1) {
        ElMessage({
            type: 'success',
            message: '执行成功!'
        })
        emits('update:modelValue', false)
        initActivityList(props.clueId)
    } else {
        ElMessage({
            type: 'error',
            message: res.data.message,
        })
    }
};
// 分页查询
const handleCurrentChange = (pageNum) => {
    queryForm.value.pageNum = pageNum;
    handleSearch();
}
const handleSizeChange = (pageSize) => {
    queryForm.value.pageNum = 1;
    queryForm.value.pageSize = pageSize;
    handleSearch();
}
</script>


<style scoped>
.el-dialog {
    text-align: center;
}
</style>
